<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>幻灯片添加</title>
<link rel="stylesheet" href="/scriptZIP/layui.min.css">
	<link rel="stylesheet" href="../css/layui.css" />
	<link rel="stylesheet" href="../css/item.css">
	<link rel="stylesheet" href="../css/radio.css">
	<style>
		#portrait {
			width: 100px;
			height: 100px;
		}

		.layui-row {
			margin-top: 50px;
		}

		.offer {
			width: 90px;
			height: 35px;
			background: #1E9FFF;
			color: white;
			text-align: center;
			line-height: 35px;
			font-size: 16px;
			border-radius: 4px;
		}

		.return {
			width: 80px;
			height: 35px;
			background: #1E9FFF;
			color: white;
			text-align: center;
			line-height: 35px;
			margin-top: -35px;
			margin-left: 130px;
			font-size: 16px;
			border-radius: 4px;
		}
	</style>
</head>

<body>

	<div class="layui-row" id="vue-root">
		<div class="layui-col-md6 layui-col-md-offset3">

			<!--  <div class="layui-form-item">
                <label class="layui-form-label">幻灯片标题</label>
                <div class="layui-input-block">
                    <input name="slideTitle" v-validate="'required'" data-vv-as="幻灯片标题" autocomplete="off"
                        placeholder="请输入幻灯片标题" class="layui-input name" v-model="item.title">
                    <div class="checkout_state" v-text="err('slideTitle')">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">幻灯片链接</label>
                <div class="layui-input-block">
                    <input name="slideLink" v-validate="'required'" data-vv-as="幻灯片链接" autocomplete="off"
                        placeholder="请输入幻灯片链接" class="layui-input imgurl" v-model="item.link">
                    <div class="checkout_state" v-text="err('slideLink')">
                    </div>
                </div>
            </div> -->
			<div class="layui-form-item">
				<label class="layui-form-label">图片上传</label>
				<label for="File1" id="tu1">
					<img id="portrait" :src="img">
				</label>
				参考值：横屏：1200*660，竖屏：910*960
				<div class="checkout_state" v-text="err('file')">
				</div>
				<form id="form" method="post" ref="form" enctype="multipart/form-data" style="display: none">
					<input type="file" v-validate="'size:1024'" data-vv-as="图片" id="File1" name="file" accept="image/*"
						@change="upload">
				</form>
			</div>
			<!-- <div class="layui-form-item">
                <label class="layui-form-label">说明</label>
                <div class="layui-input-block">
                    <textarea name="illustrate" v-validate="'required'" data-vv-as="幻灯片说明" placeholder="请输入说明"
                        class="layui-textarea text" v-model="item.illustrate"></textarea>
                    <div class="checkout_state" v-text="err('illustrate')">
                    </div>
                </div>
            </div> -->
			<div class="layui-form-item">
				<label class="layui-form-label">是否显示</label>
				<div class="layui-input-block true" style="padding-top: 13px; line-height: 15px;">
					<input type="radio" name="sex" :value="true" title="是" v-model="item.isShow">
					<span>是</span>
					<input type="radio" name="sex" :value="false" title="否" v-model="item.isShow"
						style="margin-left:20px">
					<span>否</span>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<div class="offer" @click="submit">立即提交</div>
					<div class="return" onclick="history.back()">取消</div>
				</div>
			</div>
		</div>
	</div>


	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>


	<script src="/scriptZIP/axios.min.js"></script>

	<script src="/js/common.js"></script>
	<script src="/js/item.js"></script>


	<script>
		var app = new Vue(merge({
			data: {
				item: {
					isShow: true,
					pic: null,
					schoolId: top_params().id
				},
				url: '/pc/slide'
			},
			methods: {
				upload: function () {
					axios.post('/pc/upload/slide?schoolId=' + this.item.schoolId, new FormData(this.$refs.form)).then(function (res) {
						this.item.pic = res.data.data;
					}.bind(this));
				}
			},
			computed: {
				img: function () {
					if (!this.item.pic) return '/image/upload.png';
					return '/static/' + this.item.schoolId + '/slide/' + this.item.pic;
				}
			}
		}));
	</script>

</body>

</html>